<template>
  <div class="Deitle borderStyle">
    <div class="blueTitleStyle" @click="pull">
      <span>告警详情</span>
      <!-- <i v-if="con1Display" :class=con1Display?"el-icon-caret-top":"el-icon-caret-buttom"></i> -->
      <div class="icon">
        <i v-if="con1Display" class="el-icon-caret-top"></i>
        <i v-if="!con1Display" class="el-icon-caret-bottom"></i>
      </div>
    </div>
    <div
      class="Deitle-table bigTableStyle"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table
        :data="tableData"
        border
        height="100%"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="myIndex" label="序号" width="80" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="GJSJ" width="200" label="告警时间" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="BDZMC" label="所属变电站" width="200" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="JKQY" label="监控区域/设备" width="180" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="scope.row.GJLY=='在线监测'||scope.row.GJLY=='主设备系统'">{{scope.row.EQUIP_NAME}}</div>
            <div v-else>{{scope.row.JKQY}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="GJNR" width="400" label="告警内容" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="SBMC" label="设备名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="GJLY" label="告警来源" width="100" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="GJDJ" label="告警等级" width="100" :show-overflow-tooltip="true"></el-table-column>
        <!-- <el-table-column prop="CLZT" label="处理状态" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="CLZT" label="处理状态" :show-overflow-tooltip="true" width="120">
          <template slot-scope="scope">
            <div class="operation">
              <el-select
                :disabled="scope.row.czztCode==='1'"
                v-model="scope.row.czztCode"
                @change="changeZlzt(scope.row)"
              >
                <el-option
                  v-for="(item,index) in clztOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" :show-overflow-tooltip="true" width="400">
          <template slot-scope="scope">
            <div class="operation">
              <el-button @click="ignore(scope.row)" type="primary">忽略告警</el-button>
              <el-button @click="queren(scope.row)" type="primary">确认告警</el-button>
              <el-button @click="fqqx(scope.row)" :disabled="scope.row.GJLY == '联合巡检'?false:true"  type="primary">发起缺陷</el-button>
            </div>
          </template>
        </el-table-column>-->
        <el-table-column label="联动" :show-overflow-tooltip="true" width="100">
          <template slot-scope="scope">
            <div @click="liandong(scope.row)">
              <img src="../../../../assets/img/OperationMonitor/ld.png" srcset />
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="短信推送" :show-overflow-tooltip="true" width="100">
          <template slot-scope="scope">
            <div @click="paidan(scope.row)">
              <img src="../../../../assets/img/OperationMonitor/msg.png" srcset />
            </div>
          </template>
        </el-table-column>-->
        <el-table-column label="派单" :show-overflow-tooltip="true" width="80">
          <template slot-scope="scope">
            <div @click="paidan(scope.row)">
              <img src="../../../../assets/img/OperationMonitor/pd.png" srcset />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发起缺陷" :show-overflow-tooltip="true" width="80">
          <template slot-scope="scope">
            <div @click="fqqx(scope.row)">
              <img src="../../../../assets/img/OperationMonitor/qx.png" srcset />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="self-pagination elPaginationStyle centerbox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[20, 30,50]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="showGdpf" title="工单派发">
      <gdpf :data="currentRow" v-if="showGdpf" @saveend="saveend" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import gdpf from "./gdpf.vue";
import { log } from "three";

@Component({ components: { gdpf } })
export default class Deitle extends Vue {
  loading: boolean = false;
  showGdpf = false;
  currentRow = [{ SID: "", ID: "" }];
  pages: {
    totalSize: number;
    page: number;
    pageSize: number;
  } = {
    totalSize: 0,
    page: 1,
    pageSize: 20,
  };
  tableData: any[] = [
    // {
    //   SFDW: "0",
    //   SFZNBDZ: "0",
    //   DZLX: "zf01",
    //   SBMC: "线路110kV 待用I",
    //   GCBH: "变电20170828",
    //   GJDJ: "--",
    //   JKQY: "110kV开关室",
    //   SBID: "--",
    //   YXBH: "170816",
    //   BDZZYJB: "3",
    //   OBJ_ID: "28107886688a0c76105e1b1e3d015e2810533e3cc2",
    //   GJLY: "联合巡检",
    //   SSDSMC: "国网济南供电公司",
    //   YWDW: "8a1ea5c64bdebad1014bdebc55c80003",
    //   ID: "c2cedf1f-9dff-4ec8-947c-32a94e338324724",
    //   SFSNZ: "1",
    //   TYRQ: "2017-11-24T16:00:00.000+00:00",
    //   BDZMC: "220kV天平变电站",
    //   SID: "zdxs",
    //   ROW_ID: 1,
    //   YXZT: "20",
    //   BDZID: "1500000001",
    //   WHBZMC: "变电运维二班",
    //   SFPP: "01",
    //   DXMPYXKID: "ea514f8ff18a1076125dd1f998015dea50fe4975ed",
    //   XGHSBMC: "220kV姚家变电站",
    //   BZFS: "02",
    //   SFYC: "0",
    //   WHDJ: "04",
    //   ZZ: "解放东路北奥体西路西",
    //   WHBZ: "8a1ea5c64bdebad1014bdebc55c8004d",
    //   ZCXZ: "03",
    //   GJNR: "线路110kV 待用I刀闸102开关储能指示",
    //   SSDS: "8a1ea5c64bdebad1014bdebc55c80003",
    //   YWDWMC: "国网济南供电公司",
    //   GCMC: "新建变电站",
    //   SFGISBDZ: "0",
    //   ZCDW: "8a1ea5c64bdebad1014bdebc55c80003",
    //   FBZT: "发布",
    //   GJSJ: "2019-09-30 11:59:05",
    //   ZBFS: "2",
    //   SBZR: "E885DB8A1A96675CE0408D0A5B0463A0",
    //   SFJD: "0",
    //   ZYFL: "2",
    //   DQTZ: "01",
    //   ZCDWMC: "国网济南供电公司",
    //   SFNW: "0",
    //   DYDJ: "33",
    //   CLZT: "未处理",
    //   SBBM: "06M00000019436053",
    //   DJSJ: "2017-08-27T16:00:00.000+00:00",
    // },
  ];
  // 派单成功时
  saveend() {
    let row = this.currentRow[0] || { ID: "", SID: "" };
    let params = {
      id: row.ID,
      sid: row.SID,
    };
    (this as any).$services
      .remarkInfo({ data: params, method: "put" })
      .then((result: any) => {
        console.log(result);
        if (result.code === 200) {
          this.$emit("search");
          this.showGdpf = false;
        } else {
          this.$message({
            type: "warning",
            message: "告警修改失败！",
          });
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  clztOptions = [
    {
      name: "未处理",
      code: "0",
    },
    {
      name: "已处理",
      code: "1",
    },
  ];
  // 联动
  liandong(row) {
    console.log(row);

    let isToLiandong = this.isToLiandong(row);
    if (!isToLiandong) {
      return false;
    }
    let from = {
      gjsj: row.GJSJ,
      lid: row.ISLD,
    };
    (this as any).$services
      .queryLinkageId({ data: from, method: "post", postparams: true })
      .then((result: any) => {
        let data = result.data || {};
        let id = data.ID;
        if (id) {
          row.myId = id;
          if (
            row.SBMC.indexOf("110kV") === -1 &&
            row.SBMC.indexOf("10kV") != -1
          ) {
            this.toFzLiandong(row);
            return;
          }
          if (row.PMSID === "0") {
            this.toFzLiandong(row);
          } else {
            this.getYbyJg(row, this.toLiandong);
            // this.toLiandong(row);
          }
        } else {
          this.$message({
            type: "warning",
            message: result.message,
          });
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  isToLiandong(row) {
    if (row.ISLD === "0") {
      this.$message({
        type: "warning",
        message: "该设备没有联动配置",
      });
      return false;
    } else {
      return true;
    }
  }
  getYbyJg(row, cb) {
    let params = {
      bdzId: row.BDZID,
    };
    (this as any).$services
      .getYbyJg({ data: params, method: "get" })
      .then((result: any) => {
        let data = result.data || [];
        cb(row, data);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 前往辅助监控联动
  toFzLiandong(row) {
    let query = {
      id: row.myId,
      stationName: row.BDZMC,
      reason: row.GJNR,
      createTime: row.GJSJ,
    };
    this.$router.push({
      name: "videodetail2",
      query: query,
    });
  }

  // 前往联动页面
  toLiandong(row, arr) {
    let path = "/operationmonitor/liandong";
    let BAY_ID_Arr = arr.map((v) => {
      return v.OBJ_ID;
    });
    if (BAY_ID_Arr.indexOf(row.BAY_ID) > -1) {
      path = "/operationmonitor/jgliandong";
    }
    let query = {
      ID: row.ID,
      BDZID: row.BDZID,
      PMSID: row.PMSID,
      SBID: row.SBID,
      BDZMC: row.BDZMC,
      BAYNAME: row.BAY_NAME,
      BAYID: row.BAY_ID,
      SBMC: row.SBMC,
      myId: row.myId,
      GJSJ: row.GJSJ,
      GJNR: row.GJNR,
      JCLX: row.JCLX,
      SBLX: row.SBLX,
      SBCODE: row.SBCODE,
    };
    this.$router.push({
      path,
      // path: "/operationmonitor/jgliandong",
      query: query,
    });
  }
  //修改处理状态
  changeZlzt(row) {
    this.queren(row);
  }
  // 派单
  paidan(row) {
    this.currentRow = [row];
    this.showGdpf = true;
  }
  /**
   * ignore
   */
  // 忽略告警
  public ignore(row): void {
    let form = {
      sbid: row.SBID,
      sid: row.SID,
    };
    (this as any).$services
      .passbyInfo({ data: form, method: "put" })
      .then((result: any) => {
        if (result.code === 200) {
          this.$message.success(result.message);
        } else {
          this.$message.warning(result.message);
        }
      })
      .catch((err: object) => {
        this.$message.warning("请求错误！");
      });
  }
  // 确认告警
  public queren(row): void {
    console.log(row);
    
    let form = {
      id: row.ID,
      sid: row.SID,
    };
    (this as any).$services
      .remarkInfo({ data: form, method: "put" })
      .then((result: any) => {
        if (result.code === 200) {
          this.$message.success(result.message);
          this.$emit("search");
        } else {
          this.$message.warning(result.message);
        }
      })
      .catch((err: object) => {
        this.$message.warning("请求错误！");
      });
  }
  // 发起缺陷
  public fqqx(row): void {
    var rowData = [];
    rowData.push(row);
    this.$emit("fqqx", rowData);
  }
  // 单页显示数改变时
  handleSizeChange(size) {
    this.pages.page = 1;
    this.pages.pageSize = size;
    this.$emit("search");
  }
  // 当前页码改变时
  handleCurrentChange(page) {
    this.pages.page = page;
    this.$emit("search");
  }
  // 表格数据查询
  queryIntegrageAlarmList(from) {
    this.loading = true;
    (this as any).$services
      .queryIntegrageAlarmList({ data: from, method: "get" })
      .then((result: any) => {
        this.loading = false;
        let clzt = {};
        this.clztOptions.forEach((v) => {
          clzt[v.name] = v.code;
        });
        let data = result.data;
        let page = this.pages.page;
        let size = this.pages.pageSize;
        this.tableData = data.records.map((v, i) => {
          v.czztCode = clzt[v.CLZT] || "";
          v.myIndex = (page - 1) * size + i + 1;
          return v;
        });
        this.pages.totalSize = data.total;
      })
      .catch((err: object) => {
        this.loading = false;
        console.log(err);
      });
  }
  public tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  @Prop() con1Display!: any;
  pull() {
    // console.log(1);
    this.$emit("changeHeight");
  }
}
</script>

<style lang="scss" scoped>
.Deitle {
  width: 100%;
  height: 100%;
  .blueTitleStyle {
    position: relative;
    .icon {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      i {
        font-size: 0.3rem;
      }
    }
  }
  .Deitle-table {
    width: 100%;
    height: calc(100% - 0.7rem);
    overflow-y: auto;
    > div {
      margin: auto;
    }
  }
  .self-pagination {
    width: 100%;
    height: 0.6rem;
  }
  .operation {
    display: flex;
    justify-content: space-around;
  }
  img {
    width: 0.24rem;
    height: 0.24rem;
    cursor: pointer;
  }
}
</style>

